<template>
    <div :class="{div4:div4,div5:div5}" ref="form">
        <label>username</label>
        <input v-model='loginInfo.username'/>
        <br>
        <label>password</label>
        <input v-model='loginInfo.password'/>
        <br>
        {{loginInfo}}
        <br>
        <button @click="handleLogin">login</button>
    </div>    
</template>
<script>
export default {
    data(){
        return{
            loginInfo:{
                username:'',
                password:''
            },
            div4:true,
            div5:false
        }
    },
    methods:{
        handleLogin(){
            console.log('clicked')
            this.div5=true
        }
    }
}
</script>
<style scoped>
    .div4{
        background:grey;
        width: 400px;
    }
    .div5{
        -webkit-animation: mymove 1s infinite;

        position: relative;
    }
    @-webkit-keyframes mymove{
        from{
            top: 0px;
            left: 0px;
        }
        to{
            top: -100px;
            opacity: 0;         
            transform: scale(0,0);
        }
    }
</style>